<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                ref="form"
                :rules="rules">
                <el-form-item label="名称" prop="name">
                    <el-input
                        v-model="form.name"
                        placeholder="学习路径名称"
                        class="input-width"
                    ></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="describe">
                    <div class="flex">
                        <el-input
                            maxlength="220"
                            v-model="form.describe"
                            placeholder="学习路径一句话描述"
                            class="input-width"
                            type="textarea"
                            rows="4"
                            show-word-limit
                        ></el-input>
                        <div class="ml-4 text-gray-600">描述文字请控制在 220 字以内</div>
                    </div>
                </el-form-item>
                <el-form-item label="颜色" prop="color">
                    <div class="flex items-center">
                        <el-color-picker medium v-model="form.color"/>
                        <label class="ml-2 text-sm text-gray-600">为学习路径配置一个颜色</label>
                    </div>
                </el-form-item>
                <el-form-item label="栏目" prop="type_list">
                    <el-select
                        :disabled="isDisabled"
                        v-model="form.type_list"
                        placeholder="请选择一个学习路径属性"
                        multiple
                        @change="typeChange">
                        <el-option
                            v-for="item in labelCategory"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片" prop="img">
                    <file-upload
                        :disabled="isDisabled"
                        @reFile="reFile"
                        :type="1"
                        :multiple="false"
                        v-model="form.img">
                        <img
                            v-if="form.img"
                            :src="form.img"
                            class="uploader-icon picture image-uploader"
                        />
                        <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                    </file-upload>
                    <p class="text-sm text-gray-600">为学习路径配置一张修饰图</p>
                    <p class="img-tip">配图长宽: 200像素 × 200像素</p>
                    <div class="red-color mb-4" v-if="imgData.width !== 200 || imgData.height !== 200">
                        图片不符合配图长宽： {{ imgData.width }} × {{ imgData.height }}
                    </div>
                    <p class="img-tip">配图文件大小: 2M以内</p>
                    <div v-if="imgData.size > 2" class="red-color">
                        文件大于推荐大小：{{ imgData.size }}M
                    </div>
                </el-form-item>
                <el-form-item label="关联主题"></el-form-item>
                <GroupTemplate class="group" v-model="chooseData" />
            </el-form>
            <div class="text-center" v-if="!isDisabled">
                <el-button :loading="posting" type="primary" @click="onSave">保 存</el-button>
            </div>
            <p class="text-sm text-gray-600">小贴士：可基于岗位角色创建学习路径</p>
        </el-card>
    </div>
</template>

<script>
import GroupTemplate from './Group/GroupTemplate';
import FileUpload from '../../components/base/FileUpload';

export default {
    components: {
        FileUpload,
        GroupTemplate,
    },
    data() {
        return {
            posting: false,
            form: {
                name: '',
                describe: '',
                type: '',
                img: '',
                mark: false,
                color: '#000',
                type_list: [],
                company_id: '',
                course_ids: [],
                can_edit: true,
            },
            id: this.$route.params.id,
            labelCategory: [
                {id: 1, name: '岗位角色', disabled: false},
                // {id: 2, name: '学习计划', disabled: false},
                {id: 3, name: '专题', disabled: false},
                {id: 4, name: '学习任务', disabled: false},
            ],
            rules: {
                name: [
                    { required: true, message: '学习路径名称不能为空', trigger: 'blur' },
                ],
                describe: [
                    { required: true, message: '学习路径描述不能为空', trigger: 'blur' },
                ],
                img: [
                    { required: true, message: '请为学习路径配置一张修饰图', trigger: 'blur' },
                ],
                color: [
                    { required: true, message: '请为学习路径配置一个颜色', trigger: 'blur' },
                ],
                type_list: [
                    { required: true, message: '请选择一个学习路径属性', trigger: 'blur' },
                ],
            },

            chooseData: [],
            imgData: {
                size: 0,
                width: 200,
                height: 200,
            },
        };
    },
    computed: {
        isDisabled() {
            const form = this.form;
            if (this.id && (!form.can_edit && form.type_list.indexOf(4) > -1)) return true;
            return false;
        },
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                if (this.form.type_list.length === 0) {
                    $ele.$message.error('标签属性不能为空');
                    return;
                }
                this.form.type = JSON.stringify(this.form.type_list);
                this.form.course_ids = this.chooseData.map(item => item.id);

                this.posting = true;
                if (this.id) {
                    API.put(`label/${this.id}`, this.form).then(() => {
                        this.posting = false;
                        this.$router.push({name: 'LabelManage'});
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                } else {
                    API.post('label', this.form).then(() => {
                        this.posting = false;
                        this.$router.push({name: 'LabelManage'});
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                }
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`label/${this.id}`).then((res) => {
                    this.form.can_edit = res.can_edit;
                    for (const i of Object.keys(this.form)) {
                        if (res[i] || res[i] === 0) this.form[i] = res[i];
                    }
                    if (this.form.type) this.form.type_list = JSON.parse(this.form.type);

                    this.typeChange(res.type);

                    if (!res.course_ids || !res.course_ids.length) return;
                    for (const item of res.course_ids) {
                        this.chooseData.push({id: item});
                    }
                });
            }
        },

        /**
         * 获取文件尺寸、大小
        */
        reFile(e) {
            for (const key in e) {
                if (Object.hasOwnProperty.call(e, key)) {
                    const element = e[key];
                    this.imgData.size = Math.floor(element.size / (1024 * 1024) * 100) / 100;
                }
            }

            const img = new Image();
            img.src = this.form.img;
            img.onload = () => {
                this.imgData.width = img.width;
                this.imgData.height = img.height;
            };
        },

        typeChange(e) {
            const list = this.labelCategory;
            for (const item of list) {
                if (e.indexOf(4) > -1) {
                    item.disabled = item.id !== 4;
                } else item.disabled = item.id === 4;
            }

            if (e && !e.length) {
                for (const item of list) {
                    item.disabled = false;
                }
            }
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .group {
        margin-bottom: 20px;
    }
}
</style>
